<template>
  <div>
    <div class="take-goods-record">
      <div class="title">
        <mt-field label="提货地址：" value="www.bettercard.cn/new_html/#/takeGoods" readonly class="blue"></mt-field>
        <mt-field label="注册手机：" v-model="mobile" readonly></mt-field>
        <mt-field label="您最近的提货记录：" readonly></mt-field>
      </div>
      <div class="table">
        <ul>
          <li>
            <span>提货时间：</span>
            <span>提货码:</span>
          </li>
          <li v-for="v in list" :key="v.id">
            <span>{{v.add_time}}</span>
            <span>{{v.code}}</span>
          </li>
        </ul>
      </div>
      <div class="hint">如有问题，欢迎致电：01052889997</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'TakeGoodsRecord',
    data () {
      return {
        list: [],
        mobile: ''
      }
    },
    methods: {
      getList () {
        this.$post('/vue/coupon_customer/code_list').then(data => {
          this.list = data
          this.mobile = data.length > 0 ? data[0].mobile : ''
        })
      }
    },
    mounted () {
      this.getList()
    }
  }
</script>

<style lang="less">
  @c-124: rgb(124, 124, 124);
  @c-235: rgb(235, 235, 235);
  @c-blue: rgb(108, 184, 222);
  @c-dark-blue: rgb(240, 244, 247);

  .take-goods-record {
    background-color: #FFF;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
    .title {
      text-align: left;
      .mint-field {
        min-height: auto;
        padding: 0 12px;
        .mint-cell-wrapper {
          padding: 8px 0;
          font-size: 13px;
          line-height: 24px;
          color: @c-124;
          background: none;
          border-bottom: 1px solid @c-235;
          .mint-cell-title {
            width: auto;
            display: flex;
            font-weight: bold;
          }
          .mint-cell-value {
            .mint-field-core {
              font-weight: normal;
            }
            .mint-field-clear {
              height: 24px;
            }
          }
        }
        &:last-child {
          .mint-cell-wrapper {
            border: 0;
          }
        }
        &.blue {
          .mint-field-core {
            color: @c-blue;
          }
        }
      }
    }
    .table {
      padding: 0 12px;
      ul {
        li {
          font-size: 12px;
          line-height: 24px;
          color: @c-124;
          padding: 8px 12px;
          display: flex;
          justify-content: space-between;
          &:nth-child(2n) {
            background-color: @c-dark-blue;
          }
          &:nth-child(2n - 1) {
            background-color: rgba(240,244,247,0.5);
          }
          &:first-child {
            color: #FFF;
            background-color: rgba(108, 184, 222, 0.85);
            border-radius: 8px 8px 0 0;
          }
          &:last-child {
            border-radius: 0 0 8px 8px;
          }
        }
      }
    }
    .hint {
      font-size: 11px;
      lighting-color: 16px;
      color: @c-124;
      opacity: 0.5;
      margin: 20px auto;
    }
  }
</style>